<template>
  <div>
    <h_header></h_header>
    <h_right></h_right>
    <!-- 主体开始 -->
    <div>
      <!-- 开头介绍模块 -->
      <div class="first">
        <div class="intelligent">
          <h2>知识在线</h2>
          <div class="inlineBlue"></div>
          <p>记录团队成长点滴以及对技术、理念的探索，同时我们乐于分享！</p>
        </div>
      </div>
      <!-- 下方nav和主体区域 -->
      <div class="intelligentMain">
        <!-- nav区域 -->
        <div class="intelligentNav">
          <a
            href="javascript:void(0);"
            :class="a === '1' ? 'navLeft' : ''"
            @click="onChanged1"
            >技术知识</a
          >
          <a
            href="javascript:void(0);"
            :class="a === '2' ? 'navLeft' : ''"
            @click="onChanged2"
            >常见问题</a
          >
          <a
            href="javascript:void(0);"
            :class="a === '3' ? 'navLeft' : ''"
            @click="onChanged3"
            >解决方案</a
          >
        </div>
        <!-- 内容主体区域 -->
        <!-- a=1时展示部分 -->
        <div v-if="a === '1'">
          <div class="intelligeMain1">
            <div
              class="intelligeCard1"
              v-for="item of intelligeList1"
              :key="item.index"
            >
              <img :src="item.intelligeImg" alt="" />
              <div class="textCard">
                <div class="title">
                  <span>{{ item.title1 }}</span>
                  <span :title="item.title2" class="titleMain">
                    <a href="javascript:void(0);">{{ item.title2 }}</a>
                  </span>
                </div>
                <p class="tags">
                  {{ item.p1 }}
                  <i>查看</i>
                  {{ item.p2 }}
                </p>
                <p class="textMain">
                  {{ item.content }}
                </p>
              </div>
            </div>
          </div>
          <!-- 页码区域 -->
          <div class="page">
            <span>
              共
              <b>1</b>
              页
              <b>2</b>
              条记录
            </span>
          </div>
        </div>
        <!-- a=2时展示部分 -->
        <div v-if="a === '2'">
          <div class="intelligeMain2">
            <div
              class="intelligeCard2"
              v-for="item of intelligeList2"
              :key="item.index"
            >
              <img :src="item.intelligeImg" alt="" />
              <div class="textCard">
                <div class="title">
                  <span>{{ item.title1 }}</span>
                  <span :title="item.title2" class="titleMain">
                    <a href="javascript:void(0);">{{ item.title2 }}</a>
                  </span>
                </div>
                <p class="tags">
                  {{ item.p1 }}
                  <i>查看</i>
                  {{ item.p2 }}
                </p>
                <p class="textMain">
                  {{ item.content }}
                </p>
              </div>
            </div>
          </div>
          <!-- 页码区域 -->
          <div class="page">
            <span>
              共
              <b>1</b>
              页
              <b>2</b>
              条记录
            </span>
          </div>
        </div>
        <!-- a=3时展示部分 -->
        <div v-if="a === '3'">
          <div class="intelligeMain3">
            <div
              class="intelligeCard3"
              v-for="item of intelligeList3"
              :key="item.index"
            >
              <img :src="item.intelligeImg" alt="" />
              <div class="textCard">
                <div class="title">
                  <span>{{ item.title1 }}</span>
                  <span :title="item.title2" class="titleMain">
                    <a href="javascript:void(0);">{{ item.title2 }}</a>
                  </span>
                </div>
                <p class="tags">
                  {{ item.p1 }}
                  <i>查看</i>
                  {{ item.p2 }}
                </p>
                <p class="textMain">
                  {{ item.content }}
                </p>
              </div>
            </div>
          </div>
          <!-- 页码区域 -->
          <div class="page">
            <span>
              共
              <b>1</b>
              页
              <b>1</b>
              条记录
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体结束 -->
    <h_question></h_question>
    <h_footer></h_footer>
  </div>
</template>
<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import h_question from "@/components/question/question.vue";
export default {
  components: {
    h_header: h_header,
    h_right: h_right,
    h_footer: h_footer,
    h_question: h_question,
  },
  data() {
    return {
      a: "1",
      intelligeList1: [
        {
          intelligeImg: require("../../assets/zhishi/img4.png"),
          title1: "技术知识",
          title2: "怎么让网站支持https访问，让浏览器标记为安全",
          p1: "2018-09-07 ",
          p2: "(3615)",
          content:
            "现在https是趋势，很多地方需要强制使用https，比如微信小程序的网络请求、web-view等都需要目标url是支持https访问的。那么怎么才能让网站支持https访问呢？你只需要做两个事情就够了：...",
        },
        {
          intelligeImg: require("../../assets/zhishi/img5.png"),
          title1: "技术知识",
          title2: "微信小程序wx.setStorage保存时间多久失效？",
          p1: "2018-09-07 ",
          p2: "(2999)",
          content:
            "目前微信小程序wx.setStorage获得的缓存数据是持久保存的，不是永久，获得后就存在客户端，除非主动销毁或者从客户端删除该小程序。就是你在微信发现小程序列表里删除这个小程序。...",
        },
      ],
      intelligeList2: [
        {
          intelligeImg: require("../../assets/zhishi/img2.jpg"),
          title1: "常见问题",
          title2: "建设网站对企业有哪些好处？",
          p1: "2018-09-07 ",
          p2: "(2932)",
          content:
            "网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站...",
        },
        {
          intelligeImg: require("../../assets/zhishi/img3.jpg"),
          title1: "常见问题",
          title2: "项目已经开发了app客户端，还有必要开发小程序",
          p1: "2018-09-07 ",
          p2: "(2999)",
          content:
            "最近收到一些咨询，问自己的项目（小型项目，用户量并不大）已经有ios和安卓客户端，还有网页版，是否有必要再开发小程序。 我们的建议是，是有必要开发小程序的，理由如下：...",
        },
      ],
      intelligeList3: [
        {
          intelligeImg: require("../../assets/zhishi/img1.jpg"),
          title1: "解决方案",
          title2: "如何提高网站流量和访问量？",
          p1: "2018-09-07 ",
          p2: "(2999)",
          content:
            "针对大多客户提出的流量上不去，访问量很低的情况，最优工作室在此分享5种方法提高网站流量： 第一，网站的推广策略不佳；流量上不去，如果不是因为其他的原因，比如本文列到...",
        },
      ],
    };
  },
  created() {
    if (sessionStorage.getItem("a") === null) {
      window.sessionStorage.setItem("a", "1");
    }
  },
  mounted() {
    this.a = window.sessionStorage.getItem("a");
  },
  methods: {
    onChanged1() {
      this.a = "1";
      window.sessionStorage.setItem("a", this.a);
    },
    onChanged2() {
      this.a = "2";
      window.sessionStorage.setItem("a", this.a);
    },
    onChanged3() {
      this.a = "3";
      window.sessionStorage.setItem("a", this.a);
    },
  },
};
</script>
<style lang="scss">
.intelligent {
  background: url(../../assets/zhishi/zhishi.jpg) no-repeat;
}
.intelligentNav {
  width: 400px !important;
}
</style>